/*
 * 数据分析
 * @Author: along
 * @Date: 2020-01-06 10:16:00
 */
<template>
    <div class="container dataAnalysis">
        <div class="zd_content">
            <!-- header -->
            <div class="container_main">
                <div class="content_left">
                    <div class="content_head">
                        <p class="content_text">日期</p>
                        <el-radio-group
                            v-model="echartstype"
                            size="mini"
                            style="marginRight:10px"
                            @change="fnGetChart($event)"
                        >
                            <el-radio-button label="1" >近一周</el-radio-button>
                            <el-radio-button label="2" >近一个月</el-radio-button>
                            <el-radio-button label="3" >近三个月</el-radio-button>
                            <el-radio-button label="4" >近一年</el-radio-button>
                        </el-radio-group>
                    </div>
                    <div class="content_echarts">
                        <div
                            id="echarts"
                            class="echarts"
                        />
                    </div>
                </div>
                <div class="content_right">
                    <div class="content_main">
                        <div class="content_head">
                            <p class="content_text">活跃人数</p>
                        </div>
                        <div class="content_box">
                            <div class="content_list">
                                <p class="content_list_text">今日</p>
                                <p class="content_list_time">{{ active_user.today }}</p>
                                <p class="content_list_cont">
                                    <span class="content_cont_text">昨日</span>
                                    <span class="content_cont_time">{{ active_user.yesterday }}</span>
                                </p>
                            </div>
                            <div class="content_list">
                                <p class="content_list_text">这周</p>
                                <p class="content_list_time">{{ active_user.this_week }}</p>
                                <p class="content_list_cont">
                                    <span class="content_cont_text">上周</span>
                                    <span class="content_cont_time">{{ active_user.last_week }}</span>
                                </p>
                            </div>
                            <div class="content_list">
                                <p class="content_list_text">这月</p>
                                <p class="content_list_time">{{ active_user.this_month }}</p>
                                <p class="content_list_cont">
                                    <span class="content_cont_text">上月</span>
                                    <span class="content_cont_time">{{ active_user.last_month }}</span>
                                </p>
                            </div>
                        </div>
                        <div class="content_head">
                            <p class="content_text">新增人数</p>
                        </div>
                        <div class="content_box">
                            <div class="content_list">
                                <p class="content_list_text">今日</p>
                                <p class="content_list_time">{{ new_user.today }}</p>
                                <p class="content_list_cont">
                                    <span class="content_cont_text">昨日</span>
                                    <span class="content_cont_time">{{ new_user.yesterday }}</span>
                                </p>
                            </div>
                            <div class="content_list">
                                <p class="content_list_text">这周</p>
                                <p class="content_list_time">{{ new_user.this_week }}</p>
                                <p class="content_list_cont">
                                    <span class="content_cont_text">上周</span>
                                    <span class="content_cont_time">{{ new_user.last_week }}</span>
                                </p>
                            </div>
                            <div class="content_list">
                                <p class="content_list_text">这月</p>
                                <p class="content_list_time">{{ new_user.this_month }}</p>
                                <p class="content_list_cont">
                                    <span class="content_cont_text">上月</span>
                                    <span class="content_cont_time">{{ new_user.last_month }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /header -->

            <shopHead
                :title="head.title"
            />
            <div
                class="student-home"
                v-if="true"
            >
                <div class="main-content">
                    <p class="main-content-title">数据展示</p>
                    <div class="main-content-right">
                        <el-date-picker
                            v-model="social_page.date"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :default-time="['00:00:00', '23:59:59']"
                            size="small"
                            @change="fnFilterData(1)"
                        />
                    </div>
                </div>
                <div class="main-seat" />
                <div class="zd-data">
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">人均停留时长</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="人均停留时长=访问APP的注册用户的停留时长之和 / UV（独立访问人数）">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialPage.avg_stay_time }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">学习模块人均停留时长</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="学习模块人均时长=访问学习模块的注册用户的停留时长之和 / 学习页面的访客量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialPage.avg_stay_time_course }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">工作模块人均停留时长</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="工作模块人均时长=访问工作模块的注册用户的停留时长之和 / 工作页面的访客量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialPage.avg_stay_time_work }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">商城模块人均停留时长</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="商城模块人均时长=访问商城模块的注册用户的停留时长之和 / 商城页面的访客量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialPage.avg_stay_time_shop }}</div>
                    </div>
                    <div class="zd-list">
                        <div class="zd-head">
                            <p class="zd-head-title">社交模块人均停留时长</p>
                            <el-popover
                                placement="top-start"
                                width="200"
                                trigger="hover"
                                content="社交模块人均时长=访问社交模块的注册用户的停留时长之和 / 社交页面的访客量">
                                <el-button slot="reference">
                                    <i class="el-icon-hand-tishi iconfont" />
                                </el-button>
                            </el-popover>
                        </div>
                        <div class="zd-content">{{ socialPage.avg_stay_time_social }}</div>
                    </div>
                </div>
            </div>
            <!-- tab -->
            <div style="margin: 10px 0 10px 0">
                <el-radio-group
                    v-model="type"
                    size="mini"
                    @change="fnGetList($event)"
                >
                    <el-radio-button label="1" >日活</el-radio-button>
                    <el-radio-button label="2" >周活</el-radio-button>
                    <el-radio-button label="3" >月活</el-radio-button>
                </el-radio-group>
            </div>
            <!-- /tab -->
            <div style="height:500px">
                <!-- table -->
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    border
                    ref="companyList"
                >
                    <el-table-column
                        prop="time"
                        label="日期"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.time * 1000 | dateFormatter('yyyy/MM/dd') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="active_user"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader"
                    />
                    <el-table-column
                        prop="new_user"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :render-header="renderHeader2"
                    />
                    <el-table-column
                        prop="new_user"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                        :width="130"
                        :render-header="renderHeader3"
                    >
                        <template slot-scope="scope">
                            <p v-if="scope.row.new_user !== 0 && scope.row.active_user !== 0">
                                {{ scope.row.new_user / scope.row.active_user * 100 | setUser }}
                            </p>
                            <p v-else>--</p>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="new_user_active_day_2"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader4"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="new_user_active_day_3"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader5"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="new_user_active_day_7"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader6"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="new_user_active_day_30"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader7"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="month_active_user"
                        show-overflow-tooltip
                        align="center"
                        :width="120"
                        :render-header="renderHeader8"
                    >
                        <template slot-scope="scope">
                            {{ isNaN(scope.row.active_user / scope.row.month_active_user) ? 0 : (scope.row.active_user / scope.row.month_active_user * 100).toFixed(2) }}%
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- /table -->

            <!-- 周活列表 -->
            <el-dialog
                title=""
                :visible.sync="dialogVisibleWeek"
                width="760px"
                :close-on-click-modal="false"
            >
                <el-table
                    :data="tableDataWeek"
                    min-height="40px"
                    max-height="400px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="time"
                        label="日期"
                        show-overflow-tooltip
                        :formatter="emptyFormatter"
                        align="center"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.time * 1000 | dateFormatter('yyyy/MM/dd') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="active_user"
                        label="周活"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader9"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="new_user"
                        label="周新增"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader10"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="new_user"
                        label="周新增用户占比"
                        show-overflow-tooltip
                        align="center"
                        :width="200"
                        :render-header="renderHeader11"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.new_user / scope.row.active_user * 100 | setUser }}
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
            <!-- /周活列表 -->

            <!-- 月活列表 -->
            <el-dialog
                title=""
                :visible.sync="dialogVisibleMonth"
                width="760px"
                :close-on-click-modal="false"
            >
                <el-table
                    :data="tableDataMonth"
                    min-height="40px"
                    style="width: 100%;"
                    border
                >
                    <el-table-column
                        prop="time"
                        label="日期"
                        show-overflow-tooltip
                        align="center"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.time * 1000 | dateFormatter('yyyy/MM') }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="active_user"
                        label="月活"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader12"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop="new_user"
                        label="月新增"
                        show-overflow-tooltip
                        align="center"
                        :render-header="renderHeader13"
                        :formatter="emptyFormatter"
                    />
                    <el-table-column
                        prop=""
                        label="周月新增用户占比"
                        show-overflow-tooltip
                        align="center"
                        :width="200"
                        :render-header="renderHeader14"
                        :formatter="emptyFormatter"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.new_user / scope.row.active_user * 100 | setUser }}
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
            <!-- /月活列表 -->

            <!-- /分页 -->
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page.sync="page.now_page"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
    </div>
</template>

<script>
// import grow from '@/components/number';
import shopHead from '@/components/shop-head';
import { getDate } from '@/assets/js/utils';
export default {
    /**
     * @param  {Object}    authResult               //表单权限
     * @param  {Array}     tableData                //日活表单数据
     * @param  {Array}     tableDataWeek            //周活表单数据
     * @param  {Object}    page                     //表单分页
     * @param  {String}    type                     //1:日活 2:周活 3:月活
     * @param  {String}    echartstype              //1:近一周 2:近一月 3:近三月 4:近一年
     * @param  {Boolean}   dialogVisibleWeek        //周活数据弹窗开关
     * @param  {Boolean}   dialogVisibleMonth       //月活数据弹窗开关
     * @param  {Object}    active_user              //活跃人数
     * @param  {Object}    new_user                 //新增人数
     * @param  {Ayyay}     chartDate                //图表X轴日期
     * @param  {Object}    chart                    //图表Y轴数据
     */
    components: {
        shopHead
    },
    data () {
        return {
            socialPage: {},
            social_page: {
                date: [
                    this.getDate(0),
                    this.getDate(1)
                ]
            },
            chart: {
                active: [],
                newAdd: []
            },
            chartDate: [],
            dialogVisibleMonth: false,
            dialogVisibleWeek: false,
            active_user: {},
            new_user: {},
            echartstype: '1',
            type: '1',
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            tableDataMonth: [],
            tableDataWeek: [],
            tableData: [],
            authResult: {},
            head: {
                title: '用户停留时长'
            },
            dateList: [{
                value: '',
                label: '时间段'
            },{
                value: '1',
                label: '上周'
            },{
                value: '2',
                label: '本周'
            },{
                value: '3',
                label: '上月'
            },{
                value: '4',
                label: '本月'
            }],
        };
    },
    filters: {
        setUser (val) {
            if (Number(val) === 0) {
                return '0%';
            } else {
                return val.toFixed(2) + '%';
            }
        }
    },
    watch: {
        dialogVisibleWeek (val) {
            if (!val) {
                this.type = '1';
            }
        },
        dialogVisibleMonth (val) {
            if (!val) {
                this.type = '1';
            }
        }
    },
    mounted () {
        this.authResult = this.$route.meta.authResult;
        this.getStudentInfo();
        this.fnBreadcrumb();
        this.getUserTime(this.getDate(0), this.getDate(1));
        this.getTableData();
        this.fnGetChart(1);
    },
    methods: {
        /**
         * 设置表单header
         */
        fnBreadcrumb () {
            this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '数据分析'}]);
        },

        /**
         * 获取表格数据
         */
        getTableData (page) {
            this.$post('/student/statistic%5Cget_student_statistic_list', {
                page_id: page || this.page.now_page,
                type: 1
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
         * 数据筛选
         */
        fnFilterData (type) {
            if(type == 1) {//用户停留时常
                if(this.social_page.date === null || this.social_page.date == '' || this.social_page.date.length < 1) {
                    this.getUserTime(this.getDate(0), this.getDate(1));
                }else {
                    this.getUserTime(getDate(new Date(this.social_page.date[0])) * 1000, getDate(new Date(this.social_page.date[1])) * 1000);
                }
            }
        },

        /**
         * 获取用户停留时长
         */
        getUserTime (start_time, end_time) {
            this.$post('/student/statistic%5Cget_student_page_stay', {
                start_time: start_time / 1000,
                end_time: end_time / 1000
            }, resp => {
                if (resp.code == 1) {
                    this.socialPage = {
                        ...resp.data
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取学生统计信息
         */
        getStudentInfo () {
            this.$post('/student/statistic%5Cget_student_statistic',{},resp => {
                if (resp.code == 1) {
                    this.active_user = {
                        ...resp.data.active_user
                    };
                    this.new_user = {
                        ...resp.data.new_user
                    };
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取周活数据
         */
        fnGetList (event) {
            if (event == 1) {
                return;
            }

            if (event == 2) {
                this.tableDataWeek = [];
                this.getList(1, 2);
                this.dialogVisibleWeek = !this.dialogVisibleWeek;
            } else if (event == 3) {
                this.tableDataMonth = [];
                this.getList(1, 3);
                this.dialogVisibleMonth = !this.dialogVisibleMonth;
            }
        },

        /**
         * 获取周活月活数据
         */
        getList (page, param) {
            let sum = page;

            this.$post('/student/statistic%5Cget_student_statistic_list', {
                page_id: sum,
                type: param
            }, resp => {
                if (resp.code == 1) {
                    if (param == 2) {
                        if (resp.data.list.length == 20) {
                            // this.tableDataWeek = resp.data.list;
                            this.tableDataWeek = this.tableDataWeek.concat(resp.data.list);

                            sum = sum + 1;
                            this.getList(sum, 2);
                        } else {
                            this.tableDataWeek = this.tableDataWeek.concat(resp.data.list);
                            // this.tableDataWeek = resp.data.list;
                            return;
                        }
                    } else if (param == 3) {
                        if (resp.data.list.length == 20) {
                            // this.tableDataMonth = resp.data.list;
                            this.tableDataMonth = this.tableDataMonth.concat(resp.data.list);

                            sum = sum + 1;

                            this.getList(sum,3);
                        } else {
                            this.tableDataMonth = this.tableDataMonth.concat(resp.data.list);
                            // this.tableDataMonth = resp.data.list;
                            return;
                        }
                    } else {
                        return;
                    }
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 图表数据切换
         */
        fnGetChart (event) {
            let tempDate = new Date().getTime();

            if (event == 1) {
                this.fnGetChartList(tempDate - 86400000 * 7, tempDate, 1);
            } else if (event == 2) {
                this.fnGetChartList(tempDate - 86400000 * 31, tempDate, 2);
            } else if (event == 3) {
                this.fnGetChartList(tempDate - 86400000 * 93, tempDate, 2);
            } else if (event == 4) {
                this.fnGetChartList(tempDate - 86400000 * 365, tempDate, 3);
            }
        },

        /**
         * 获取图表数据
         */
        fnGetChartList (start_time, end_time, type) {
            this.chart = {
                active: [],
                newAdd: []
            };
            this.chartDate = [];

            this.$post('/student/statistic%5Cget_student_statistic_list_for_graphic', {
                start_time: parseInt(start_time / 1000),
                end_time: parseInt(end_time / 1000),
                type: type
            }, resp => {
                if (resp.code == 1) {
                    resp.data.list.map(item => {
                        this.chartDate.push(this.setTime(item.time));
                        this.chart.active.push(item.active_user);
                        this.chart.newAdd.push(item.new_user);
                    });

                    this.setEcharts();
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 时间戳转日期
         */
        setTime (no) {
            let temp = no * 1000;
            let month = new Date(temp).getMonth() + 1;
            let day = new Date(temp).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return month + '-' + day;
        },

        /**
         * 设置图表
         */
        setEcharts () {
            let echarts = document.getElementById('echarts');
            let my_echarts = this.$echarts.init(echarts);

            my_echarts.setOption({
                color:['#1890FF','#2FC25B'],
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:['新增人数','活跃人数'],
                    left: 18,
                    top: 10
                },
                //操作
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            show: false
                        },
                        dataView: {
                            readOnly: true
                        },
                        magicType: {type: ['line', 'bar']},
                        restore: {},
                        saveAsImage: {}
                    },
                    right: 15,
                    height: 8
                },
                //图表位置
                grid: {
                    top: 75,
                    bottom: 20,
                    height: 180
                },
                //x轴数据
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: this.chartDate
                },
                //y轴数据
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name:'新增人数',
                        type:'line',
                        data: this.chart.newAdd,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        // markLine: {
                        //     data: [
                        //         {type: 'average', name: '平均值'}
                        //     ]
                        // }
                    },
                    {
                        name:'活跃人数',
                        type:'line',
                        data: this.chart.active,
                        markLine: {
                            animationEasing: 'cubicOut',
                            data: [
                                // {type: 'average', name: '平均值'},
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'max'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            position: 'start',
                                            formatter: '最大值'
                                        }
                                    },
                                    type: 'max',
                                    name: '最高点'
                                }],
                                [{
                                    symbol: 'none',
                                    x: '90%',
                                    yAxis: 'min'
                                }, {
                                    symbol: 'circle',
                                    label: {
                                        normal: {
                                            position: 'start',
                                            formatter: '最小值'
                                        }
                                    },
                                    type: 'min',
                                    name: '最低点'
                                }]
                            ]
                        }
                    }
                ]
            });
        },

        /**
         * 获取指定日期时间戳
         */
        getDate (day) {
            let tempDate = new Date();
            let retult_milliseconds = tempDate.getTime() + 1000 * 60 * 60 * 24 * day;

            tempDate.setTime(retult_milliseconds);

            let result_Year = tempDate.getFullYear(),
                result_Month = (tempDate.getMonth() + 1).toString(),
                result_Date = tempDate.getDate().toString();

            if (result_Month.length === 1) {
                result_Month = "0" + result_Month;
            }

            if (result_Date.length === 1) {
                result_Date = "0" + result_Date;
            }

            let date = result_Year + "-" + result_Month + "-" + result_Date + " " + "00:00:00";

            return new Date(date).getTime();
        },

        /**
         * 日期转换
         */
        setTemp (temp) {
            let year = new Date(temp * 1000).getFullYear(),
                month = new Date(temp * 1000).getMonth() + 1,
                day = new Date(temp * 1000).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            return year + '-' + month + '-' + day;
        },

        /**
         * 当天时间戳转当日0点时间戳
         */
        setDate (no) {
            let year = new Date(no).getFullYear(),
                month = new Date(no).getMonth()+1,
                day = new Date(no).getDate();

            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day;

            let date = year + '-' + month + '-' + day + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 获取本周周一零点时间戳
         */
        getMondayTemp () {
            let date = new Date().getDay();
            let temp = null;

            switch (date % 7) {
                case 1:
                    temp = this.getDate(0);
                    break;
                case 2:
                    temp = this.getDate(-1);
                    break;
                case 3:
                    temp = this.getDate(-2);
                    break;
                case 4:
                    temp = this.getDate(-3);
                    break;
                case 5:
                    temp = this.getDate(-4);
                    break;
                case 6:
                    temp = this.getDate(-5);
                    break;
                case 0:
                    temp = this.getDate(-6);
                    break;
                default:
                    break;
            }
            return temp;
        },

        /**
         * 获取本月/上月一号0点时间戳
         * param: 1_本月 0:上月
         */
        getMonthtemp (param) {
            let year = new Date().getFullYear(),
                month = new Date().getMonth() + 1;

            if (param == 0) {
                if (month - 1 == 0) {
                    month = 12;
                    year = year - 1;
                } else {
                    month = month - 1;
                }
            }
            month = month < 10 ? '0' + month : month;

            let date = year + '-' + month + '-01' + ' ' + '00:00:00';

            return new Date(date).getTime();
        },

        /**
         * 时间戳转小时
         */
        gethous (temp) {
            let h = new Date(temp * 1000).getHours(),
                m = new Date(temp * 1000).getMinutes(),
                s = new Date(temp * 1000).getSeconds();

            h = h < 10 ? '0' + h : h;
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;

            return h + ':' + m + ':' + s;
        },

        /**
         * 设置表头_日活
         */
        renderHeader(h, {}){
            return h('span', {}, [
                h('span', {}, '日活'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '日活为当天的新增用户+此前每一天新增用户在当天的留存用户之和' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_新增
         */
        renderHeader2(h){
            return h('span', {}, [
                h('span', {}, '新增'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '新增为当日新增的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_新增用户占比
         */
        renderHeader3(h){
            return h('span', {}, [
                h('span', {}, '新增用户占比'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '新增用户占比为每日新增用户/每日活跃用户*100%' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_次日留存
         */
        renderHeader4(h){
            return h('span', {}, [
                h('span', {}, '次日留存'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '新用户在首次登录后，次日再登录的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_三日存留
         */
        renderHeader5(h){
            return h('span', {}, [
                h('span', {}, '3日存留'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '新用户在首次登录后，从明日开始计，第3日再登录的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_七日存留
         */
        renderHeader6(h){
            return h('span', {}, [
                h('span', {}, '7日存留'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '新用户在首次登录后，从明日开始计，第7日再登录的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_三十日存留
         */
        renderHeader7(h){
            return h('span', {}, [
                h('span', {}, '30日存留'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '新用户在首次登录后，从明日开始计，第30日再登录的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_DAU/MAU
         */
        renderHeader8(h){
            return h('span', {}, [
                h('span', {}, 'DAU/MAU'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: 'DAU/MAU为留存指数，计算方式为当日DAU/从当日起往前推30天内的MAU' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_周活
         */
        renderHeader9(h){
            return h('span', {}, [
                h('span', {}, '周活'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '周活为一个自然周内活跃的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_周活
         */
        renderHeader10(h){
            return h('span', {}, [
                h('span', {}, '周新增'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '周新增为一个自然周内新增的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_周新增
         */
        renderHeader11(h){
            return h('span', {}, [
                h('span', {}, '周新增用户占比'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '此数据可用于判断用户的新增与留存趋势' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_月活
         */
        renderHeader12(h){
            return h('span', {}, [
                h('span', {}, '月活'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '月活为一个自然月内活跃的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_月新增
         */
        renderHeader13(h){
            return h('span', {}, [
                h('span', {}, '月新增'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '月新增为一个自然月内新增的用户数' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 设置表头_月新增用户占比
         */
        renderHeader14(h){
            return h('span', {}, [
                h('span', {}, '月新增用户占比'),
                h('el-popover', { props: { placement: 'top-start', width: '240', trigger: 'hover', content: '此数据可用于判断用户的新增与留存趋势' }}, [
                    h('i', { slot: 'reference', class:'el-icon-question'}, '')
                ])
            ]);
        },

        /**
         * 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        // background-color: #fff;
        padding: 10px 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        .zd_content {
            width: 100%;
            display: flex;
            flex-direction: column;
        }
        .container_main {
            width: 100%;
            height: 352px;
            overflow: hidden;
            margin-bottom: 10px;
            display: flex;
            box-sizing: border-box;
            .content_left {
                background: #ffffff;
                width: 52%;
                height: 100%;
                margin-right: 10px;
                .content_head {
                    width: 100%;
                    height: 55px;
                    border-bottom: 1px #E8E8E8 solid;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .content_text {
                        font-size: 16px;
                        font-weight: bold;
                        font-weight: bold;
                        padding-left: 24px;
                    }
                }
                .content_echarts {
                    width: 100%;
                    height: 297px;
                    // border: 1px red solid;
                    box-sizing: border-box;
                    .echarts {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            .content_right {
                width: 47%;
                height: 100%;
                display: flex;
                flex-direction: column;
                background: #ffffff;
                // border-left: 1px #f4f4f4 solid;
                // border: 1px red solid;
                .content_head {
                    width: 100%;
                    height: 55px;
                    border-bottom: 1px #E8E8E8 solid;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .content_text {
                        font-size: 16px;
                        font-weight: bold;
                        font-weight: bold;
                        padding-left: 24px;
                    }
                }
                .content_main {
                    width: 100%;
                    height: 297px;
                    // border: 1px red solid;
                    .content_box {
                        display: flex;
                        margin-bottom: 10px;
                        .content_list {
                            display: flex;
                            flex-direction: column;
                            // align-items: center;
                            padding-left: 50px;
                            width: 33.33%;
                            height: 116px;
                            .content_list_text {
                                height: 22px;
                                line-height: 22px;
                                font-size: 14px;
                                color: #3F454B;
                                margin-top: 15px;
                            }
                            .content_list_time {
                                font-size: 24px;
                                color: #000000;
                                font-weight: 500;
                                height: 32px;
                                line-height: 32px;
                                margin-top: 3px;
                                margin-bottom: 6px;
                                margin-left: -3px;
                            }
                            .content_list_cont {
                                display: flex;
                                height: 22px;
                                align-items: center;
                                .content_cont_text {
                                    color: #88909C;
                                    font-size: 12px;
                                    padding-right: 4px;
                                }
                                .content_cont_time {
                                    color: #88909C;
                                    font-size: 12px;
                                }
                            }
                        }
                    }
                    .content_add {
                        width: 100%;
                    }
                }
            }
        }
        /* 表单 */
        .scope-price {
            width: 50px;
            height: 50px;
        }
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 15px;
            padding-bottom: 15px;
            background: #ffffff;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
        // .el-icon-question:before {
        //     color: #ccc;
        // }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }

    //
    .student {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .student-home {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        padding: 12px 15px 30px 15px;
        margin-bottom: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
            &-right {
                display: flex;
                align-items: center;
                color: #3F454B;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
    }
    .main {
        width: 100%;
        display: flex;
    }
    .main-flow {
        width: calc(100% / 2);
        padding: 12px 15px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 15px;
        }
    }
    /* 数据展示 */
    .zd-data {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
        .zd-list {
            width: calc(100% / 5);
            display: flex;
            flex-direction: column;
            align-items: center;
            .zd-head {
                height: 20px;
                display: flex;
                align-items: center;
                cursor: pointer;
                .zd-head-title {
                    font-size: 14px;
                    color: #3F454B;
                }
                .el-button {
                    width:10px;
                    border: none !important;
                    margin: -3px 0 0 -15px !important;
                    background: transparent !important;
                }
                .el-button:hover {
                    background: transparent !important;
                }
            }
            .zd-content {
                height: 38px;
                line-height: 38px;
                color: #1D2023;
                font-size: 22px;
                margin-top: 10px;
            }
        }
        .zd-list:nth-child(n + 6) {
            margin-top: 57px;
        }
    }
</style>
<style lang="less">
    .dataAnalysis .el-table__body-wrapper .el-table__body .el-table__row td {
        border-right: none;
    }
    .dataAnalysis .el-table__header-wrapper .el-table__header .has-gutter tr th {
        border-right: none;
    }
    .dataAnalysis .el-table .el-table_1_column_6  .cell {
        position: relative;
    }
    .dataAnalysis .el-range-editor--small .el-range-separator{
        padding: 0 1px !important;
    }
    .dataAnalysis .el-icon-question {
        color: #CCCCCC !important;
    }
    .dataAnalysis {
        .el-dialog__body {
            max-height: 500px;
            overflow: hidden;
            overflow-y: auto;
        }
    }
</style>